<!--<style lang="less">
    @import '../../components/views/login.less';
</style>-->

<template>
    <div class="login">
        <div class="login-con">
            <Card icon="log-in" title="欢迎登录" :bordered="false">
                <div class="form-con">
                    <login-form @on-success-valid="handleUserInfoSubmit"/>
                    <p class="login-tip">输入用户名和密码</p>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
    import LoginForm from '@/app/pages/LoginForm'

    export default {
        name: 'Login',
        components: {
            LoginForm
        },
        methods: {
            handleUserInfoSubmit({userName, password}) {
                window.console.log(userName, this.$md5(password));
                if (userName === '' && password === '') {
                    this.$Message.error('用户名或密码不能为空!');
                    return;

                }
                let userInfo = {
                    "username": userName,
                    "password": this.$md5(password)
                };
                window.console.log(JSON.stringify(userInfo));
                this.$http.post('/user/login', JSON.stringify(userInfo), {
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    }
                })
                    .then(res => {
                        window.console.log(res.data);
                        if (res.data.code === 200) {
                            var userAndToken = res.data.data;
                            var token = userAndToken.split('-')[0];
                            window.console.log('-------------userAndToken', userAndToken);
                            window.console.log('-------------token------', token);
                            this.$global.userName = userAndToken.split('-')[1];
                            window.localStorage["token"] = token;
                            this.$global.isNeedLogin = false;
                            this.$Message.success('登录成功');
                            this.$router.replace('/navigate');
                            this.reload();

                        } else {
                            window.console.log(res.data.code);
                            this.$Message.error(res.data.msg);

                        }
                    }).catch(err => {
                    this.$Message.error(err.data);
                });

            }
        },


    }
</script>

<style scoped>
    .login {
        /*width: 100%;*/
        height: 900px;
        background-image: url('../../assets/login.jpg');
        filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;

    }

    .login-con {
        position: absolute;
        right: 300px;
        top: 400px;
        transform: translateY(-60%);
        width: 300px;
    }


    .login-header {
        font-size: 16px;
        font-weight: 300;
        text-align: center;
        padding: 30px 0;
    }

    .form-con {
        padding: 10px 0 0;
    }

    .login-tip {
        font-size: 10px;
        text-align: center;
        color: #c3c3c3;
    }

    .title-msg {
        position: absolute;
        right: 800px;
        top: 400px;
    }
</style>
